<template>
  <div>
    <!-- 导航栏 -->
    
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo navbar"
      mode="horizontal"
      @select="handleSelect"
    >
      <router-link to="/"
        ><el-menu-item index="1">首页</el-menu-item></router-link
      >
      <el-menu-item class="serch" index="2">
        <el-autocomplete
          placeholder="请输入内容"
          class="serch"
        ></el-autocomplete>
        搜索
      </el-menu-item>
      <router-link to="/login">
        <el-menu-item index="3">登入</el-menu-item>
      </router-link>
      <router-link to="/register">
        <el-menu-item index="4">注册</el-menu-item>
      </router-link>
      <el-menu-item index="5">会员中心</el-menu-item>
    </el-menu>
    <div class="line"></div>
    

    <!-- 中间内容区域 -->
    <transition name="el-zoom-in-top">
    <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  background-color: white;
  .serch {
    margin: 0 2px;
  }
  a {
    text-decoration: none;
  }
}
</style>